<!-- ArticleList.vue -->
<template>
  <div class="article-list">
    <div class="header">
      <h2>文章列表</h2>
      <el-button type="primary" @click="handleCreate">新建文章</el-button>
    </div>

    <el-card v-for="article in articles" :key="article.id" class="article-card">
      <div class="article-item">
        <div class="article-cover">
          <img v-if="article.coverImage" :src="article.coverImage" :alt="article.title">
        </div>
        <div class="article-content">
          <h3 class="article-title" @click="handleView(article.id)">{{ article.title }}</h3>
          <p class="article-summary">{{ article.summary }}</p>
          <div class="article-meta">
            <span>作者: {{ article.author }}</span>
            <span>发布时间: {{ formatDate(article.createTime) }}</span>
            <span>状态: {{ article.status === 1 ? '已发布' : '草稿' }}</span>
          </div>
          <div class="article-actions">
            <el-button type="primary" link @click="handleEdit(article.id)">编辑</el-button>
            <el-button type="danger" link @click="handleDelete(article.id)">删除</el-button>
          </div>
        </div>
      </div>
    </el-card>

    <el-empty v-if="articles.length === 0" description="暂无文章" />
    
    <div v-if="loading" class="loading-container">
      <el-loading :visible="true" />
    </div>

    <div v-if="!loading && hasMore" class="load-more" v-intersection="loadMore">
      <span>加载更多...</span>
    </div>

    <div v-if="!loading && !hasMore && articles.length > 0" class="no-more">
      <span>没有更多文章了</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, computed, ref } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessageBox } from 'element-plus';
import { useArticleStore } from '../store/article';
import { storeToRefs } from 'pinia';
import type { ArticleListItem } from '../types/article';
import { vIntersection } from '@/directives/intersection';

const router = useRouter();
const articleStore = useArticleStore();
const { articles, loading, error, total, currentPage, pageSize } = storeToRefs(articleStore);

onMounted(async () => {
  await articleStore.fetchArticles();
});

const formatDate = (dateString: string): string => {
  return new Date(dateString).toLocaleDateString('zh-CN');
};

const handleView = (id: string): void => {
  router.push(`/article/${id}`);
};

const handleEdit = (id: string): void => {
  router.push(`/article/edit/${id}`);
};

const handleCreate = (): void => {
  router.push('/article/create');
};

const handleDelete = async (id: string): Promise<void> => {
  try {
    await ElMessageBox.confirm('确定要删除这篇文章吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });
    await articleStore.deleteArticle(id);
    await articleStore.fetchArticles(currentPage.value, pageSize.value);
  } catch {
    // 用户取消删除操作
  }
};

const hasMore = computed(() => {
  return articles.value.length < total.value;
});

const loadMore = async () => {
  if (loading.value || !hasMore.value || articles.value.length % pageSize.value !== 0) return;
  await articleStore.fetchArticles(currentPage.value + 1, pageSize.value, true);
};
</script>

<style scoped>
.article-list {
  padding: 20px;
  
  margin: 0 auto;
  width: calc(100% - 600px);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.article-card {

  margin-bottom: 20px;
}

.article-item {
  display: flex;
  gap: 20px;
}

.article-cover {
  width: 200px;
  height: 120px;
  overflow: hidden;
  background-color: #f5f7fa;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-cover:empty::before {
  content: "暂无图片";
  color: #909399;
  font-size: 14px;
}

.article-content {
  flex: 1;
}

.article-title {
  margin: 0 0 10px;
  cursor: pointer;
  color: #333;
}

.article-title:hover {
  color: #409EFF;
}

.article-summary {
  color: #666;
  margin: 0 0 10px;
}

.article-meta {
  color: #999;
  font-size: 14px;
  margin-bottom: 10px;
}

.article-meta span {
  margin-right: 20px;
}

.article-actions {
  display: flex;
  gap: 10px;
}

.loading-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.load-more {
  text-align: center;
  padding: 20px 0;
  color: #409EFF;
  cursor: pointer;
}

.load-more:hover {
  opacity: 0.8;
}

.no-more {
  text-align: center;
  padding: 20px 0;
  color: #999;
}
</style>